<template>
  <div>
    <el-row>
      <el-col :span="1">&nbsp &nbsp</el-col>
      <el-col :span="22">
        <div class="block">
          <span class="demonstration">请选择排课时间</span>
          <el-date-picker v-model="selectTimeChos" type="datetimerange"
          :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
            @change="loadLeagueClass()"
            value-format="yyyy-MM-dd HH:mm:ss"
            >
          </el-date-picker>
        </div>
        <div style="text-align: center;font-size: 40px;color:navy;">可排课程</div>
        <el-table :data="page" border>
          <el-table-column prop="leagueClassName" label="团课名" width="115">
          </el-table-column>
          <el-table-column prop="coachName" label="教练名" width="115">
          </el-table-column>
          <el-table-column prop="minute" label="课程时长" width="118">
          </el-table-column>
          <el-table-column prop="classTypeName" label="课程类型名称" width="118">
          </el-table-column>
          <el-table-column prop="leagueClassDetail" label="课程描述" width="118">
          </el-table-column>



          <el-table-column label="操作" width="126">
            <template #default="scope">
              <el-button @click="addLeagueClass(scope.row)" type="text" size="small">排班</el-button>
            </template>
          </el-table-column>

        </el-table>


        <el-dialog title="请输入新增排班信息" :visible.sync="showAddwindow" width="35%" style="font-size: 20px;">
          备注: <el-input v-model="addworkforceRemark"></el-input>

          <span slot="footer">
            <el-button @click="showAddwindow = false" type="danger" round>取 消</el-button>
            <el-button @click="addLeague()" type="success" round>确 认</el-button>
          </span>
        </el-dialog>

      </el-col>

      <el-col :span="1">&nbsp</el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: "VenueLeagueClassWorkforce",
    data() {
      return {
        pickerOptionsChos:{

        },
        pickerOptions: {


          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        selectTimeChos: '',
        addWorkforceLeagueClassId: '',
        addWorkforceClassroomId: '',
        addWorkforceCoachId: '',
        addWorkforceRemark: '',
        addWorkforceTime: [],

        showAddwindow: false, // 新增的窗口
        page: {},
        }
      },
      methods: {

          //载入可排班的团课
          loadLeagueClass() {
            // console.log(this.selectTimeChos[0])
            this.$http.post("product/yLeagueWorkforce/loadLeagueClassForceWhichAllow", {
              startTime: this.selectTimeChos[0],
              endTime: this.selectTimeChos[1]
            }).then(resp => {
              this.page = resp.data.data
            })


            // this.showAddwindow = true


          },
          //新增团课
          addLeague() {
            this.$http.post("product/yLeagueWorkforce/addLeagueClassForce", {
                  leagueClassId:this.addWorkforceLeagueClassId,
                  classroomId:this.addWorkforceClassroomId,
                  startTime:this.selectTimeChos[0],
                  endTime:this.selectTimeChos[1],
                  coachId:this.addWorkforceCoachId,
                  remark:this.addWorkforceRemark
            }).then(resp => {

              this.showAddwindow = false;
              this.loadLeagueClass();
            });
          },
          //打开新增窗口
          addLeagueClass(leagueClass) {
            this.addworkforceLeagueClassId = leagueClass.leagueClassId;
            this.addworkforceClassroomId = leagueClass.classroomId;
            this.addworkforceCoachId = leagueClass.coachId;

            this.showAddwindow = true;
          },

        },

    }
</script>

<style>
</style>
